import { ElectronicLockMessageDTO } from './../../../../shared/service-proxy/service-proxies';
import { AppComponentBase } from '@shared/common/app-component-base';
import { Component, OnInit, ViewChild, ElementRef, Injector } from '@angular/core';
import { ServiceProxy } from '@shared/service-proxy/service-proxies';
import { loadModules } from 'esri-loader';
import esri = __esri;
import {AppConsts} from "@shared/AppConsts";
@Component({
  selector: 'app-container-history-path-modal',
  templateUrl: './container-history-path-modal.component.html',
  styleUrls: ['./container-history-path-modal.component.less']
})
export class ContainerHistoryPathModalComponent extends AppComponentBase implements OnInit {
  isVisible: boolean = false;
  list: ElectronicLockMessageDTO[] = [];

  pathPoins: Array<any> = [];
  @ViewChild('mapViewNode') private mapViewEl: ElementRef;
  constructor(injector: Injector,
    private _service: ServiceProxy) {
    super(injector);
  }

  ngOnInit() {
  }

  show(id: string) {
    this.pathPoins = [];
    this._service.searchPositionInfoOldUsingGET(id).subscribe(result => {
      this.list = result.result;
      this.isVisible = true;

      this.list.map(m => {
        if(parseInt(m.longitude.toString())!=0 && parseInt(m.latitude.toString())!=0)
          this.pathPoins.push([m.longitude, m.latitude]);
      });
      if (this.pathPoins.length != 0) {
        this._center = this.pathPoins[0];
      }
      this.initializeMap();
    });
  }

  async initializeMap() {
    try {
      const [
        Map,
        MapView,
        ScaleBar,
        TileLayer,
        Graphic] = await loadModules([
        'esri/Map',
        'esri/views/MapView',
        'esri/widgets/ScaleBar',
        'esri/layers/TileLayer',
        "esri/Graphic",
        'dojo/domReady!'
      ], {
        url: AppConsts.arcgisMapUrl,         css: AppConsts.arcgisStyleUrl
      });

      // Set type of map
      const map: esri.Map = new Map({
        // basemap: this._basemap,
        layers: new TileLayer({
          url: AppConsts.arcgisMapServerUrl
        })
      });

      const mapView: esri.MapView = new MapView({
        container: this.mapViewEl.nativeElement,
        center: this._center,
        zoom: this._zoom,
        map: map
      });

      // All resources in the MapView and the map have loaded.
      // Now execute additional processes
      mapView.when(() => {
        const scaleBar = new ScaleBar({
          view: mapView,
          unit: "dual" // The scale bar displays both metric and non-metric units.
        });
        mapView.ui.add(scaleBar, "bottom-left");

        // First create a line geometry (this is the Keystone pipeline)
        if (this.pathPoins.length) {
          mapView.graphics.removeAll();
          const polyline = {
            type: "polyline", // autocasts as new Polyline()
            paths: this.pathPoins
          };

          // Create a symbol for drawing the line
          const lineSymbol = {
            type: "simple-line",
            color: "green",
            width: "4",
            style: "solid"
          };
          const polyLineGraphic = new Graphic({
            geometry: polyline,
            symbol: lineSymbol
          });
          mapView.graphics.add(polyLineGraphic);
        }

      });


    } catch (error) {
      console.log('We have an error: ' + error);
    }

  }

  close() {
    this.isVisible = false;
  }
}
